<template>
  <div class="p-5">
    <el-card shadow="never">
      <el-row justify="start">
        <el-col :span="8" :xs="24">
          <div class="flex h-full items-center">
            <img class="w-20 h-20 mr-5 rounded-full" :src="avatar" />
            <div>
              <p>{{ greetings }}</p>
            </div>
          </div>
        </el-col>
        <el-col :span="1"></el-col>
        <!-- <el-col :span="8" :xs="24">
          <p class="text-sm text-gray">今天是 {{ weatherInfo?.time }}</p>
          <p class="text-sm text-gray">
            {{ weatherInfo?.province }}
            {{ weatherInfo?.city }}
            今日天气
            <span v-text="getWeatherDescription(weatherInfo?.weatherCode || 0)"></span>
          </p>
          <p class="text-sm text-gray">
            气温 {{ weatherInfo?.temperature2mMin }} ℃ ~{{ weatherInfo?.temperature2mMax }}℃
          </p>
          <p class="text-sm text-gray">
            体感温度 {{ weatherInfo?.apparentTemperatureMin }} ℃ ~{{
              weatherInfo?.apparentTemperatureMax
            }}℃
          </p>
          <p class="text-sm text-gray">日出 {{ weatherInfo?.sunrise }}</p>
          <p class="text-sm text-gray">日落 {{ weatherInfo?.sunset }}</p>
          <p class="text-sm text-gray">
            紫外线指数 {{ weatherInfo?.uvIndexMax }}
            <span v-if="(weatherInfo?.uvIndexMax || 0) >= 8">紫外线很强，注意做好防晒</span>
          </p>
        </el-col> -->
      </el-row>
    </el-card>
  </div>
</template>

<script setup lang="ts">
defineOptions({
  name: "Dashboard",
  inheritAttrs: false,
});
import { useUserStore } from "@/store/modules/user.store";

const userStore = useUserStore();
import FileAPI from "@/api/file.api";
import WeatherApi, { type WeatherInfo } from "@/api/system/weather.api";
const weatherInfo = ref<WeatherInfo>();
const avatar = ref("");

watch(
  () => userStore.userInfo.avatar,
  async (curVal, oldVal) => {
    console.log("头像发生变化", oldVal, curVal);

    avatar.value = await FileAPI.preview(userStore.userInfo.avatar);
  }
);

onMounted(async () => {
  WeatherApi.getInfo().then((data) => {
    weatherInfo.value = data;
  });
  avatar.value = await FileAPI.preview(userStore.userInfo.avatar);
});
const date: Date = new Date();
const greetings = computed(() => {
  const hours = date.getHours();
  if (hours >= 6 && hours < 8) {
    return "晨起披衣出草堂，轩窗已自喜微凉🌅！";
  } else if (hours >= 8 && hours < 12) {
    return "晨曦正踮着脚尖路过你的窗台🌿. 出发吧，今日的冒险要蘸着阳光书写🦋🐿️✨";
  } else if (hours >= 12 && hours < 18) {
    return "太阳在青瓷碗沿打盹儿，我往你的柠檬茶里投了粒会游动的光斑。所有昏昏欲睡的故事忽然踮脚起舞，而你的名字被蝉翼驮着，正轻轻——跌进我写满草莓籽与彩虹糖的纸飞机✈️🍉✨";
  } else if (hours >= 18 && hours < 24) {
    return "云絮正偷抿晚霞的胭脂🌆归鸟衔着余温掠过钟楼，风在窗棂摊开发烫的诗集——“白昼欠你的那捧星芒，此刻正叮咚沉入月亮的银盏。”";
  } else {
    return "偷偷向银河要了一把碎星，只等你闭上眼睛撒入你的梦中，晚安🌛！";
  }
});

function getWeatherDescription(code: number): string {
  switch (code) {
    case 0:
    case 1:
      return "晴";
    case 2:
    case 3:
      return "多云";
    case 45:
      return "雾";
    case 48:
      return "浓雾";
    case 51:
    case 53:
    case 55:
      return "小雨";
    case 56:
    case 57:
    case 66:
    case 67:
      return "冻雨";
    case 61:
    case 63:
    case 65:
      return "中雨";
    case 71:
    case 73:
    case 75:
      return "雪";
    case 77:
      return "冰雹";
    case 80:
    case 81:
    case 82:
      return "暴雨";
    case 85:
    case 86:
      return "大雪";
    case 95:
    case 96:
      return "雷阵雨";
    case 99:
      return "雷阵雨，伴有强降水";
    default:
      return "晴";
  }
}
</script>

<style lang="scss" scoped></style>
